/*
* @Author: Administrator
* @Date:   2017-11-29 09:11:56
* @Last Modified by:   Administrator
* @Last Modified time: 2017-11-29 11:10:34
*/
/*
* @Author: Administrator
* @Date:   2017-11-29 09:11:56
* @Last Modified by:   Administrator
* @Last Modified time: 2017-11-29 10:38:51
*/
$(function(){
   var $imagesLis = $(".carousel .images li");
		var $rightBtn = $(" .carousel .rightBtn");
		var $leftBtn = $(" .carousel  .leftBtn");
		var $circlesLis = $(" .carousel  .circles li");

		//天生no2里面的mask是不可见的
		$(".no1 .mask").hide();

		//信号量
		var idx = 0;
		
		//得到一个JSON大数组，存放每个noX的JSON状态
		var JSONARR = (function(){
			var temp = [];
			$imagesLis.each(function(){
				temp.push({
					"left" : $(this).css("left"),
					"top" : $(this).css("top"),
					"width" : $(this).css("width"),
					"height" : $(this).css("height"),
					"opacity" : $(this).css("opacity")
				});
			});
			return temp;
		})();

		// //得到类名数组
		var classnameArr = (function(){
			var temp = [];
			$imagesLis.each(function(){
				temp.push($(this).attr("class"));
			});
			return temp;
		})();


		//定时器
		var timer = setInterval(rightBtnHandler,1200);
		$(".carousel ").mouseenter(function(){clearInterval(timer);});
		$(".carousel ").mouseleave(function(){clearInterval(timer);timer = setInterval(rightBtnHandler,1200);});


		//右按钮的监听
		$rightBtn.click(rightBtnHandler);

		
		function rightBtnHandler(){
			//防流氓
			if($imagesLis.is(":animated")){
				return;
			}
			//集体左移动
			for(var i = 1 ; i < $imagesLis.length ; i++){
				$(".images li.no" + i).animate(JSONARR[i - 1] , 600);
			}
			$(".images li.no1").css(JSONARR[2]);

			//mask
			$(".images li.no2 .mask").fadeOut();
			$(".images li.no1 .mask").fadeIn();

			//类名数组的改变
			classnameArr.unshift(classnameArr.pop());
			//把数组的改变反映到元素身上。数组改变是虚的，是JS的，而不是DOM改变
			$imagesLis.each(function(i) {
				$(this).attr("class",classnameArr[i]);
			});
			//防止BUG
			$(".images li.no2").css(JSONARR[2]);

			//信号量，信号量和动画没有关系，只和小圆点有关系
			idx++;
			if(idx > $imagesLis.length - 1){
				idx = 0;
			}
			$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
		};


		//左按钮的监听
		$leftBtn.click(function(){
			//防流氓
			if($imagesLis.is(":animated")){
				return;
			}
			//集体左移动
			for(var i = 0 ; i < $imagesLis.length - 1 ; i++){
				$(".images li.no" + i).animate(JSONARR[i + 1] , 600);
			}
			$(".images li.no2").css(JSONARR[0]);
			//mask
			$(".images li.no0 .mask").fadeOut();
			$(".images li.no1 .mask").fadeIn();

			//类名数组的改变
			classnameArr.push(classnameArr.shift());
			//把数组的改变反映到元素身上。数组改变是虚的，是JS的，而不是DOM改变
			$imagesLis.each(function(i) {
				$(this).attr("class",classnameArr[i]);
			});

			$(".images li.no0").css(JSONARR[0]);

			//信号量，信号量和动画没有关系，只和小圆点有关系
			idx--;
			if(idx < 0){
				idx = $imagesLis.length - 1;
			}
			$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
		});


		// 小圆点的点击
		$circlesLis.click(function(){
			//你点击的小圆点序号和当前信号量的差
			var cha = $(this).index() - idx;
			//如果信号量是正数，那么就表示你的点到了右边
			if(cha > 0){
				for(var i = 0 ; i < cha; i++){
					classnameArr.unshift(classnameArr.pop());
				}
			}else if(cha < 0){
				for(var i = 0 ; i < Math.abs(cha); i++){
					classnameArr.push(classnameArr.shift());
				}
			}
		
			//集体退后
			$imagesLis.animate({"width":100,"height":60,"left":500,"top":150,"opacity":0},400);
			//console.log(classnameArr);

			setTimeout(function(){
				$imagesLis.each(function(i) {
					$(this).attr("class",classnameArr[i]);
				});

				for(var i = 0 ; i <=3; i++){
					$(".no" + i).stop(true).animate(JSONARR[i],200);
				}

				// 改变mask的显示和隐藏
				$(".mask").show();
				$(".no2 .mask").hide();
			},400);

			
			idx = $(this).index();
			//小圆点的cur
			$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
		});

})